<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
        	*{
        		padding: 0;
        		margin: 0;
        	}
        	#box{
        		width: 100px;
        		height: 100px;
        		background: pink;
        	}
        </style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
		<script>
	$(function(){
		var oBox=$("#box")
		//触屏滑动事件
		var startPoint = 0;
		var startX = 0,startY=0;
		var translateX = 0,translateY = 0;
		oBox.on("touchstart", function(e) {
		    startPointX = e.originalEvent.changedTouches[0].pageX;
			startPointY = e.originalEvent.changedTouches[0].pageY;
			startX = translateX;
			startY = translateY;
			
			//阻止页面的滑动默认事件
            $(document).on("touchmove",defaultEvent,false);
		});
		oBox.on("touchmove", function(e) {
		   var nowPointX = e.originalEvent.changedTouches[0].pageX;
			var nowPointY = e.originalEvent.changedTouches[0].pageY;
			var disX = nowPointX - startPointX;
			var disY = nowPointY - startPointY;
			translateX= startX + disX;
			translateY= startY + disY;
			
			//边界
		translateX=Math.min(Math.max(translateX,0),$(window).width()-oBox.innerWidth())
        translateY=Math.min(Math.max(translateY,0),$(window).height()-oBox.innerHeight())
			
			oBox.css({'transform':"translate("+translateX+"px,"+translateY+"px)"})
		});
		oBox.on("touchend", function(e) {
			$(document).on("touchmove",defaultEvent,false);
		});
		function defaultEvent(e) {
		   e.preventDefault();
		}
	});
	
/*			endX = e.originalEvent.changedTouches[0].pageX,
			endY = e.originalEvent.changedTouches[0].pageY;
			//往左滑动startX-endX>0,往右滑动startX-endX<0,点击时设兼容为5
			var touchX = startX-endX;
			if(Math.abs(touchX)>5){//点击
				if(touchX>=0){//往左滑动
				}else{
				}
			}
*/	
</script>
		</script>
	</body>
</html>
